<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #fff;
            font-family:'Courier New', Courier, monospace;
        }
        #resume{
            width: 1100px;
            min-height: 500px;
            background-color: #fff;
            /* box-shadow: 0px 0px 20px #ddd; */
            margin: 0px auto;
            box-sizing: border-box;
            /* padding: 20px 0; */
            font-size: 18px;
            color: #2F3235;
        }
        .boederCC{
            border: 1px solid #ccc;
        }
        .borderBCC{
            border-bottom: 1px solid #ccc;
        }
        .title{
            height: 30px;
            font-weight: 600;
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 600;
        }
        .title>b{
            width: 5px;
            height: 25px;
            background-color: rgb(250,222,0);
            margin-right: 10px;
        }
        .mag20{
            margin: 20px;
        }
        .pad20{
            padding: 20px;
        }
        .padH10{
            padding: 10px 0;
        }
        .cont{
            background-color: #ddd;
            border-radius: 5px;
            border:1px solid #ccc
        }
        .font20{
            font-size: 20px;
        }
        .font18{
            font-size: 18px;
        }
        .fontW{
            font-weight: 600;
        }
        .pad1020{
            padding: 10px 20px;
        }
        .flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .flex1{
            display: flex;
            align-items: center;
            flex: 1;
        }
        .bor-right{
            border-right: 1px solid #ccc;
        }
        .ol{
            width: 5px;
            height: 5px;
            background-color: #000;
            border-radius: 50%;
            margin-right: 8px;
        }
        ol{
            margin: 0;
        }
        li{
            line-height: 23px;
        }
        .b{
            color: rgb(146, 105, 2);
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="resume">
        <div class="title">
            <b></b>
            <span>联系方式</span>
        </div>
        <div class="cont mag20">
            <div class="flex">
                <div class="flex1 pad1020 bor-right">
                    <b class="ol"></b>
                    <div>手机： 17803267972</div>
                </div>
                <div class="flex1 pad1020 bor-right">
                    <b class="ol"></b>
                    <div>邮箱： yang81110@163.com</div>
                </div>
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>微信：qq2436104407</div>
                </div>
            </div>
        </div>
        <div class="title">
            <b></b>
            <span>个人信息</span>
        </div>
        <div class="cont mag20">
            <div class="flex borderBCC">
                <div class="flex1 pad1020 bor-right">
                    <b class="ol"></b>
                    <div>杨果 | 男 | 1997-10-08</div>
                </div>
                <div class="flex1 pad1020 bor-right">
                    <b class="ol"></b>
                    <div>学历： 统招本科</div>
                </div>
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>前端开发 | 2年工作经验</div>
                </div>
            </div>
            <div class="flex">
                <div class="flex1 pad1020 borderBCC">
                    <b class="ol"></b>
                    <div> 学校：   北华航天工业学院（2016-2020）</div>
                </div>
            </div>
            <div class="flex">
                <div class="flex1 pad1020 borderBCC">
                    <b class="ol"></b>
                    <div>技术博客：  https://www.cnblogs.com/xianrenjia/</div>
                </div>
            </div>
            <div class="flex">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div> github：   https://github.com/XianRenJia</div>
                </div>
            </div>
        </div>
        <div class="title">
            <b></b>
            <span>专业技术</span>
        </div>
        <div class="cont mag20">
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>擅长<span class="b">微信小程序开发</span>，对微信小程序的<span class="b">组件开发</span>，<span class="b">微信支付</span>、<span class="b">图表开发</span>、<span class="b">分享开发</span>、<span class="b">自定义底部导航条</span>等有着丰富的开发能力。</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟练掌握微信小程序<span class="b">蓝牙</span>连接，与硬件工程师合作制定了蓝牙传输协议，并通过其制作了一款<span class="b">飞镖游戏</span></div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟练使用<span class="b">Vue</span>全家桶进行开发，能熟练编写各种组件、服务等。</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟悉移动端的各种屏幕的适配问题，对<span class="b">ios和安卓</span>页面之间的差异化问题有着一定的了解。</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>掌握<span class="b">css3</span>和<span class="b">html5</span>，可以用<span class="b">css3</span>和<span class="b">html5</span>实现网页特效页面的制作</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟悉<span class="b">es6、es7</span>的新特性，如<span class="b">Promise、async</span>函数</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟悉<span class="b">nodejs</span>,能够使用nodejs搭建简易服务器</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>了解一定的<span class="b">MySQL</span>，能使用其来进行简单的增删查改。</div>
                </div>
            </div>
            <div class="flex borderBCC">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>熟练使用<span class="b">git、svn</span>等代码管理工具来进行团队协作开发。</div>
                </div>
            </div>
            <div class="flex">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>了解<span class="b">Echarts</span>图表进行定制开发,对web端进行研发。</div>
                </div>
            </div>
        </div>
        <div class="title">
            <b></b>
            <span>工作经历</span>
        </div>
        <div class="cont mag20 font20 fontW" >
            <div class="flex">
                <div class="flex1 pad1020">
                    <b class="ol"></b>
                    <div>北京奥商鸿赢体育有限公司</div>
                </div>
                <div class="flex1 pad1020" style="text-align: center;">
                    <div>前端开发</div>
                </div>
                <div class=" pad1020">
                    <div>2020/08 —— 至今</div>
                </div>
            </div>
        </div>
        <div class="title">
            <b></b>
            <span>项目经历</span>
        </div>
        <div class="cont mag20 pad20" >
            <div class="flex1 padH10 font20 fontW">
                <b class="ol"></b>
                <div>爱镖娱乐(2020-09-01 —— 2022-01-25)</div>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目环境：</div>
            </div>
            <div class="flex1">
                <div>微信开发者工具+JavaScript</div>
            </div>
            <br />
            <div class="padH10" style="line-height: 22px;">
                <span class="fontW">项目功能:</span>
                <span>用户注册、信息修改、蓝牙小游戏、排行榜、成绩展示、分销分享、日常任务、优惠券、附近设备、比赛报名、体彩兑奖、分销提现、历史战绩、商户中心、商城详情、地址管理、购物车、自定义底部导航栏、人脸录入功能</span>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目职责：</div>
            </div>
            <ol>
                <li>该项目重新架构、开发、上线、迭代的前端部分都是本人独立完成</li>
                <li>重构架构之前小程序，将三个小程序重新构筑在一个小程序中</li>
                <li>将http二次封装，封装之后在将所有接口放在一个文件夹下方便管理</li>
                <li>根据需求完成项目自定义导航组件、默认图片等功能</li>
                <li>获取地位展示周围设备所在位置距离</li>
                <li>将项目整体分成各个模块，通过模块进行分包、减少主模块的加载时间</li>
            </ol>
            <div class="flex1 padH10 fontW">
                <div>项目亮点：</div>
            </div>
            <ol>
                <li>开发自定义底部导航栏，使其可以更加符合公司需求</li>
                <li>开发一套完整的微信小程序蓝牙连接断开的流程</li>
                <li>与硬件合作开发一款飞镖游戏，配合硬件销售</li>
                <li>用户每次打开小程序通过openid查找数据库进行静默登录</li>
                <li>通过swiper标签实现排行榜、比赛列表等进行左右滑动，实现更好的用户体验</li>
                <li>通过canvas标签打开设备前置摄像头进行人脸录入功能，为公司举办线上比赛获取准备条件</li>
            </ol>
        </div>
        <div class="cont mag20 pad20" >
            <div class="flex1 padH10 font20 fontW">
                <b class="ol"></b>
                <div>爱镖娱乐后台比赛系统(2021-10-01 —— 2022-01-20)</div>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目环境：</div>
            </div>
            <div class="flex1">
                <div>vue2+JavaScript+webpack+elementUI</div>
            </div>
            <br />
            <div class="padH10" style="line-height: 24px;">
                <span class="fontW">项目功能:</span>
                <span>用户登录、比赛列表、添加比赛、修改比赛信息、报名人数列表、比赛抽签、比赛管理、成绩展示</span>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目职责：</div>
            </div>
            <ol>
                <li>通过vue-cli脚手架独立搭建项目，独立完成整个项目开发</li>
                <li>使用vue全家同进行开发，并使用vuex作为状态管理工具</li>
                <li>负责http请求的封装</li>
                <li>使用elementUI作为项目UI进行页面美化</li>
                <li>将路由放入数据库中，通过请求返回的数据来进行权限判断</li>
                <li>封装列表组件，实现搜索、分页、数据等功能</li>
            </ol>
            <div class="flex1 padH10 fontW">
                <div>项目亮点：</div>
            </div>
            <ol>
                <li>使用vuex-persistedstate来保持vuex的状态，避免因为刷新导致vuex消失</li>
                <li>编写比赛对阵表，会根据人数不同进行自动调整，支持胜败展示</li>
                <li>axios二次封装，支持取消请求，请求超时，拦截等功能</li>
                <li>封装比赛模式展示列表，实现超出屏幕支持横向滑动</li>
                <li>新建比赛时，使用Editor组件来处理比赛章程的内容，支持文字、图片、超链接等</li>
                <li>根据需求自己封装比赛规则，根据选择的比赛模式的不同，会导致要求不同来定义，创建比赛时又更多选择</li>
                <li>通过使用腾讯会议的API，获取飞镖机上视频摄像头和数据，放置在大屏幕上，形成大屏现场直播观影效果</li>
                <li>通过腾讯云人脸识别比赛者的用户信息，在飞镖机确认在准备开始，实现疫情下的线上比赛</li>
            </ol>
        </div>

        <div class="cont mag20 pad20" style="display: none;">
            <div class="flex1 padH10 font20 fontW">
                <b class="ol"></b>
                <div>天宫讲堂(2021-06-01 —— 2021-09-30)</div>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目环境：</div>
            </div>
            <div class="flex1">
                <div>微信开发者工具+JavaScript</div>
            </div>
            <br />
            <div class="padH10" style="line-height: 24px;">
                <span class="fontW">项目功能:</span>
                <span>用户注册、分类列表、我的学习、我的订单、用户信息修改、课程详情、课题问答、视频播放、文章展示、精彩推荐</span>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目职责：</div>
            </div>
            <ol>
                <li>通过技术研究，决定使用原生微信小程序模式开发</li>
                <li>整体使用flex弹性布局</li>
                <li>通过swiper标签实现首页轮播图</li>
                <li>制作下滑组件实现列表下滑等待效果、提升用户体验</li>
                <li>不同的课程文件采用不同的方式解决</li>
                <li>购买课程要根据不同优惠券进行折扣减少</li>
            </ol>
            <div class="flex1 padH10 fontW">
                <div>项目亮点：</div>
            </div>
            <ol>
                <li>使用openid来进行登陆，只需授权一次小程序，将不再需要登陆，提升用户体验感</li>
                <li>将登陆组件化，通过分享时进入不同的页面进行登陆</li>
                <li>课程详情中，不同的类型文件会以不同的形式展现，主要包括视频、音频、pdf、文件、选择题</li>
                <li>做题模式中可以多次答题，可以查看自己做题的次数、可以历史回答</li>
                <li>购买课程，总共有两种优惠券，在计算单买课程时需要实时计算当前的价格</li>
                <li>课程展示更多时，使用scroll-view自动跳转到当前已经看到的课程的地方</li>
            </ol>
        </div>
        <div class="cont mag20 pad20" >
            <div class="flex1 padH10 font20 fontW">
                <b class="ol"></b>
                <div>网上书城app(2020-01-01 —— 2020-05-01)</div>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目环境：</div>
            </div>
            <div class="flex1">
                <div>HbuilderX+uniApp+JavaScript+nodejs+Mysql</div>
            </div>
            <br />
            <div class="padH10" style="line-height: 24px;">
                <span class="fontW">项目功能:</span>
                <span>用户注册、分类列表、我的书架、书籍列表、书籍详情、新书推荐</span>
            </div>
            <div class="flex1 padH10 fontW">
                <div>项目职责：</div>
            </div>
            <ol>
                <li>通过技术研究，决定使用uniapp来进行app项目的开发</li>
                <li>整体使用flex弹性布局</li>
                <li>通过swiper标签实现首页轮播图</li>
                <li>制作下滑组件实现列表下滑等待效果、提升用户体验</li>
                <li>不同的课程文件采用不同的方式解决</li>
                <li>购买课程要根据不同优惠券进行折扣减少</li>
            </ol>
            <div class="flex1 padH10 fontW">
                <div>项目亮点：</div>
            </div>
            <ol>
                <li>使用openid来进行登陆，只需授权一次小程序，将不再需要登陆，提升用户体验感</li>
                <li>将登陆组件化，通过分享时进入不同的页面进行登陆</li>
                <li>课程详情中，不同的类型文件会以不同的形式展现，主要包括视频、音频、pdf、文件、选择题</li>
                <li>做题模式中可以多次答题，可以查看自己做题的次数、可以历史回答</li>
                <li>购买课程，总共有两种优惠券，在计算单买课程时需要实时计算当前的价格</li>
                <li>课程展示更多时，使用scroll-view自动跳转到当前已经看到的课程的地方</li>
            </ol>
        </div>
        <div class="mag20 pad20" style="margin-bottom: 0;padding-bottom: 0;">
            <div class="flex1" style="justify-content: center;">
                <div style="margin-right: 200px;">
                    <img src="./2.jpg" alt="爱镖娱乐" style="width: 250px;">
                    <div class="fontW" style="text-align: center;font-size: 25px;margin-top:10px ;">爱镖娱乐</div>
                </div>
                <div style="margin-right: 100px;">
                    <img src="./1.jpg" alt="天宫讲堂" style="width: 250px;">
                    <div class="fontW" style="text-align: center;font-size: 25px;margin-top:10px ;">天宫讲堂</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>